<template>
<div>
  <Header title="账号管理"></Header>
  <div class="input_item">
    <van-field v-model="data.nickName" label="昵称" placeholder="请输入昵称" />
    <van-field v-model="data.gexing" label="个性签名" placeholder="请输入个性签名" />
    <van-field v-model="data.password" label="修改密码" type="password" placeholder="请输入密码" />
    <van-button type="primary" color="#ffc400" class="btn" round block native-type="submit"
      @click="save()">保存</van-button>
    <van-button type="primary" color="#ffc400" class="btn" round block native-type="submit"
      @click="loginOut()">退出登录</van-button>
  </div>
</div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import Header from '../../components/Header.vue'
import { useRouter } from 'vue-router';
let router = useRouter()
import { Toast } from 'vant';
let data = reactive({
  nickName: '',
  gexing: '静态值',
  password: ''
})

const loginOut = (value) => {
  localStorage.removeItem('isLogin')
  if (value) {
    Toast(value)
  }
  else {
    Toast('退出登录')
  }
  router.push('/login')
}

const save = () => {
  if (data.nickName && data.password) {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    const newUserInfo = {
      'username': data.nickName || userInfo['user'],
      'password': data.password || userInfo['password'],
    }
    localStorage.setItem('userInfo', JSON.stringify(newUserInfo))
    Toast('修改成功');
    router.push('/login');
    loginOut('请重新登录')
  }
}

const init = () => {
  let userInfo = JSON.parse(localStorage.getItem('userInfo'))
  data.nickName = userInfo.username;
  data.password = userInfo.password;

}

onMounted(() => {
  init()
})
</script>

<style scoped>
.btn {
  width: 90%;
  margin: 20px auto;
}
</style>
